<template>
    <!-- 查看打印弹框 -->
    <div class="pre" v-if="show">
        <el-dialog :visible.sync="show" custom-class="prescription-dialog" @closed="close()">
            <div id="box">
                <div id="type">
                    <div>普通</div>
                    <div>药品处方</div>
                </div>
                <div id="title" class="title">
                    <div>
                        仁安医院
                    </div>
                    <div style="margin-top: 10px;margin-bottom: 20px;">
                        处方笺
                    </div>
                </div>
                <div class="underline">
                    <div class="content underline">
                        <div>
                            <div style="display: flex;">
                                <div>
                                    <label class="checkbox-container">
                                        <input type="checkbox" id="checkType">
                                        <span class="checkmark"></span>
                                        <span>公费</span>
                                    </label>
                                </div>
                                <div style="margin-left: 5px;">
                                    <label class="checkbox-container">
                                        <input v-model="checkType" type="checkbox" id="checkType2">
                                        <span class="checkmark"></span>
                                        <span>自费</span>
                                    </label>
                                </div>
                            </div>
                            <div style="display: flex;">
                                <div>
                                    <label class="checkbox-container">
                                        <input type="checkbox" id="checkType3">
                                        <span class="checkmark"></span>
                                        <span>医保</span>
                                    </label>
                                </div>
                                <div style="margin-left: 5px;">
                                    <label class="checkbox-container">
                                        <input type="checkbox" id="checkType4">
                                        <span class="checkmark"></span>
                                        <span>其它</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div style="margin-left: 550px;">
                            <span>处方编号：</span><span>{{ prescriptionId }}</span>
                        </div>
                    </div>
                    <div class="content">
                        <div>
                            <span>姓名：</span><span class="underline">{{ patientRow.Name }}</span>
                        </div>
                        <div style="margin-left: 150px;">
                            <span>性别：</span><span class="underline">{{ patientRow.Sex == 2 ? '女' : '男' }}</span>
                        </div>
                        <div style="margin-left: 150px;">
                            <span>年龄：</span><span class="underline">{{ patientRow.AgeYear }}岁</span>
                        </div>
                        <div style="margin-left: 150px;">
                            <span>体重：</span><span class="underline">{{
        patientDetail.Height ? patientDetail.Height + 'kg' : '未提供' }}</span>
                        </div>
                    </div>
                    <div class="content">
                        <div>
                            <span>门诊/住院病历号： </span><span class="underline">{{ patientRow.VisitId }}</span>
                        </div>
                        <div style="margin-left: 150px;">
                            <span>科别（病床/床位号）： </span><span class="underline">{{ patientRow.DeptName }}</span>
                        </div>
                    </div>
                    <div class="content">
                        <div>
                            <span>临床诊断：</span><span class="underline">{{ patientDetail.Diagnosis || patientDetail.TCM
                                }}</span>
                        </div>
                        <div style="margin-left: 150px;">
                            <span>开具日期： </span><span class="underline">2024-05-11</span>
                        </div>
                    </div>
                    <div class="content">
                        <div>
                            <span>住址/电话：</span><span class="underline">{{ personInfo.ADDRESS }}/{{
        personInfo.PHONENO }}</span>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 20px;" class="underline">
                    <div class="title">RP</div>
                    <div class="rp-content">
                        <div v-for="(v, i) in prescriptionDetail" :key="i">
                            <div>
                                {{ v.ItemNo }}、{{ v.ItemName }}({{ v.ItemSpec }})
                            </div>
                            <div>
                                sig: {{ v.Usage }} <span>用药嘱咐：</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    本页完
                </div>
                <div style="margin-top: 50px;">
                    <div class="underline">
                        <div class="content">
                            <div>
                                <span>医师:</span><span class="underline">{{ patientDetail.DoctName }}</span>
                            </div>
                            <div style="margin-left: 150px;">
                                <span>药品金额：</span><span class="underline">{{totalPrice}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props: {

    },
    data() {
        return {
            show: false,
            checkType: true,
            patientRow: {},
            patientDetail: {},
            prescriptionDetail: [],
            personInfo: {},
            prescriptionId: '',
            totalPrice: 0
        }
    },
    methods: {
        open({ patientRow, patientDetail, prescriptionDetail, personInfo, prescriptionId }) {
            this.show = true
            this.patientRow = patientRow
            this.patientDetail = patientDetail
            this.prescriptionDetail = prescriptionDetail
            this.personInfo = personInfo
            this.prescriptionId = prescriptionId
            this.totalPrice = prescriptionDetail.reduce((price, v) => {
                return price + v.TotalPrice
            }, 0)
        },
        close() {
            this.show = false
        },

    }
}
</script>

<style lang="scss" scoped>

/deep/.pre .prescription-dialog  .el-dialog__body {
    /* max-height: 700px !important;
    height: 700px !important; */
}

#box {
    position: relative;

    #type {
        position: absolute;
        border: 1px solid #cdcbcb;
        padding: 0px 5px;
        right: 0;
    }

    .title {
        font-weight: bold;
        font-size: 20px;

    }

    #title {
        padding-top: 40px;
        text-align: center;
    }

    .underline {
        position: relative;
        max-width: 100%;

        &::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            border-bottom: 1px solid #000;
            /* 设置下划线的样式、宽度和颜色 */
        }
    }

    .content {
        display: flex;
        /* justify-content: space-around; */
        align-items: end;
        font-size: 16px;
        margin-top: 10px;
    }

    /* 隐藏原生的checkbox */
    .checkbox-container input[type="checkbox"] {
        display: none;
    }

    /* 创建自定义的checkbox外观 */
    .checkbox-container .checkmark {
        display: inline-block;
        width: 18px;
        /* 根据需要调整大小 */
        height: 18px;
        /* 根据需要调整大小 */
        background: #fff;
        /* 设置背景色 */
        margin-right: 5px;
        /* 根据需要调整间距 */
        border-radius: 2px;
        /* 圆角 */
        position: relative;
        border: 1px solid #4e4d4d;
    }

    /* 当checkbox被选中时，显示一个'√' */
    .checkbox-container input[type="checkbox"]:checked+.checkmark:before {
        content: '';
        position: absolute;
        left: 5px;
        /* 根据背景色和大小调整 */
        top: 1px;
        /* 根据背景色和大小调整 */
        width: 6px;
        /* 根据背景色和大小调整 */
        height: 10px;
        /* 根据背景色和大小调整 */
        border: solid #000;
        /* 边框颜色 */
        border-width: 0 2px 2px 0;
        /* 创建'√'的线条 */
        transform: rotate(45deg);
        /* 旋转 */
    }

    .rp-content {
        padding-left: 20px;
    }
}
</style>
